<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    table tr:nth-child(odd){
        background-color: aqua;
    }
    table tr:nth-child(even){
        background-color: rgb(212, 21, 189);
    }
    tr td{cursor:pointer}

</style>
<body>
        <table border="1">
            <tr style="color:'red'"><td>1</td><td>2</td><td>3</td></tr>
            <tr><td>4</td><td>5</td><td>6</td></tr>
            <tr><td>7</td><td>8</td><td>9</td></tr>
            <tr><td>10</td><td>11</td><td>12</td></tr>
            </table>
            
</body>
<script type="text/javascript">
    let td=document.querySelectorAll("td");
    for(let i=0;i<td.length;i++){
        td[i].addEventListener("click",function(){
        // alert("click");
        td[i].style.backgroundColor="yellow";
    })
    }
  
</script>
</html>